<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Test Column Hider Extension: Large Menu</title>
		<meta name="viewport" content="width=570">
		<style>
			@import "../../../dojo/resources/dojo.css";
			@import "../../css/skins/claro.css";

			/* This selector made more specific to cleanly override height */
			.dgrid.dgrid-grid {
				width: 750px;
				margin: 10px;
				height: 20em;
			}
		</style>
		<script src="../../../dojo/dojo.js" 
			data-dojo-config="async: true"></script>
		<script>
			var columns1, columns2;
			require(["dojo/_base/lang", "dojo/_base/declare",
				"dgrid/OnDemandGrid", "dgrid/Selection", "dgrid/Keyboard",
				"dgrid/extensions/ColumnHider",
				"dojo/store/Memory", "dojo/domReady!"],
			function(lang, declare, Grid, Selection, Keyboard, ColumnHider, Memory){
				var columns = {}, data = {id: "1"};

				for (var i = 1; i <= 20; ++i) {
					data["col" + i] = "Value " + i;
					columns["col" + i] = "Column " + i;
				}

				var store = window.store = new Memory({
					data: [data]
				});

				var grid = window.grid = new (declare([Grid, Selection, Keyboard, ColumnHider]))({
					store: store,
					columns: columns
				}, "grid");
				
				grid.on("dgrid-columnstatechange", function(evt){
					console.log("Column for field " + evt.column.field + " is now " +
						(evt.hidden ? "hidden" : "shown"));
				});
			});
		</script>
	</head>
	<body class="claro">
		<h2>A grid with many, many columns, to demonstrate the resizing ColumnHider menu</h2>
		<div id="grid"></div>
	</body>
</html>
